import { cloneDeep } from 'lodash';
import { FormItemConfig } from '@/components/form-design/item-select/config/type';

/**
 * 容器组件
 */
export const BASE_GRID_COL_CONFIG: FormItemConfig = {
  id: '',
  name: '栅格列',
  group: 'container',
  type: 'grid-col',
  component: 'grid-container',
  settingComponent: 'grid-col-setting',
  selectIcon: '',
  itemConfig: {},
  config: {
    span: 12,
    offset: 0,
    order: ''
  },
  formList: []
};

export const GRID_CONFIG: FormItemConfig = {
  id: '',
  name: '栅格',
  group: 'container',
  type: 'grid',
  component: 'grid-container',
  settingComponent: 'grid-setting',
  selectIcon: 'icon-apps',
  itemConfig: {},
  config: {
    gutter: 0,
    justify: 'start',
    align: 'start',
    wrap: true
  },
  formList: [cloneDeep(BASE_GRID_COL_CONFIG), cloneDeep(BASE_GRID_COL_CONFIG)]
};

export const DEFAULT_TAB_CONFIG: FormItemConfig = {
  id: '',
  name: '标签页',
  group: 'container',
  type: 'tab',
  component: '',
  settingComponent: '',
  selectIcon: '',
  itemConfig: {},
  config: {
    name: '标签页'
  },
  formList: []
};

export const TABS_CONFIG: FormItemConfig = {
  id: '',
  name: '标签页',
  group: 'container',
  type: 'tabs',
  component: 'tabs-container',
  settingComponent: 'tabs-container-setting',
  selectIcon: 'icon-folder',
  itemConfig: {},
  config: {
    size: 'medium',
    type: 'line',
    position: 'top',
    trigger: 'click',
    justify: false,
    animation: false,
    hideContent: false,
    headerPadding: true,
    defaultActiveKey: ''
  },
  formList: [cloneDeep(DEFAULT_TAB_CONFIG)]
};

/**
 * 基础组件
 */
export const INPUT_CONFIG: FormItemConfig = {
  id: '',
  name: '输入框',
  group: 'basic',
  type: 'input',
  component: 'form-item-input',
  settingComponent: 'item-setting-input',
  selectIcon: 'icon-pen-fill',
  itemConfig: {
    tooltip: '',
    label: '输入框',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: '',
    placeholder: '',
    allowClear: true,
    maxLength: '',
    showWordLimit: true,
    onChangeFunction: ''
  }
};

export const INPUT_NUMBER_CONFIG: FormItemConfig = {
  group: 'basic',
  type: 'input-number',
  component: 'form-item-input-number',
  settingComponent: 'item-setting-input-number',
  name: '数字输入框',
  selectIcon: 'icon-formula',
  itemConfig: {
    tooltip: '',
    label: '数字输入框',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: undefined,
    placeholder: '',
    allowClear: true,
    mode: 'embed',
    precision: undefined,
    step: undefined,
    max: undefined,
    min: undefined,
    hideButton: false,
    formatter: '',
    parser: '',
    onChangeFunction: ''
  }
};

export const SELECT_CONFIG: FormItemConfig = {
  group: 'basic',
  type: 'select',
  component: 'form-item-select',
  settingComponent: 'item-setting-select',
  name: '选择器',
  selectIcon: 'icon-down',
  itemConfig: {
    tooltip: '',
    label: '选择器',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: undefined,
    placeholder: '',
    allowClear: true,
    multiple: false,
    allowSearch: true,
    maxTagCount: 0,
    bordered: true,
    limit: 5,
    options: [],
    onChangeFunction: ''
  }
};

export const TEXTAREA_CONFIG: FormItemConfig = {
  id: '',
  name: '文本域',
  group: 'basic',
  type: 'textarea',
  component: 'form-item-textarea',
  settingComponent: 'item-setting-textarea',
  selectIcon: 'icon-paste',
  itemConfig: {
    tooltip: '',
    label: '文本域',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: '',
    placeholder: '',
    allowClear: true,
    maxLength: '',
    showWordLimit: true,
    autoSize: true,
    onChangeFunction: ''
  }
};

export const CHECK_BOX_CONFIG: FormItemConfig = {
  group: 'basic',
  type: 'check-box',
  component: 'form-item-check-box',
  settingComponent: 'item-setting-check-box',
  name: '复选框',
  selectIcon: 'icon-check-square',
  itemConfig: {
    tooltip: '',
    label: '复选框',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: [],
    direction: 'horizontal',
    max: undefined,
    checkAll: false,
    options: [],
    onChangeFunction: ''
  }
};

export const RADIO_CONFIG: FormItemConfig = {
  group: 'basic',
  type: 'radio',
  component: 'form-item-radio',
  settingComponent: 'item-setting-radio',
  name: '单选框',
  selectIcon: 'icon-record',
  itemConfig: {
    tooltip: '',
    label: '单选框',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: [],
    direction: 'horizontal',
    type: 'radio',
    options: [],
    onChangeFunction: ''
  }
};

export const CASCADER_CONFIG: FormItemConfig = {
  group: 'basic',
  type: 'cascader',
  component: 'form-item-cascader',
  settingComponent: 'item-setting-cascader',
  name: '级联选择',
  selectIcon: 'icon-double-down',
  itemConfig: {
    tooltip: '',
    label: '级联选择',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: [],
    placeholder: '',
    allowClear: true,
    options: '',
    multiple: false,
    allowSearch: false,
    pathMode: false,
    maxTagCount: 5,
    checkStrictly: false,
    onChangeFunction: ''
  }
};

export const TREE_SELECT_CONFIG: FormItemConfig = {
  group: 'basic',
  type: 'tree-select',
  component: 'form-item-tree-select',
  settingComponent: 'item-setting-tree-select',
  name: '树选择',
  selectIcon: 'icon-mind-mapping',
  itemConfig: {
    tooltip: '',
    label: '树选择',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: [],
    placeholder: '',
    allowClear: true,
    options: '',
    multiple: false,
    allowSearch: false,
    maxTagCount: 5,
    border: true,
    treeCheckable: false,
    treeCheckStrictly: false,
    treeCheckedStrategy: 'all',
    onChangeFunction: ''
  }
};

export const COLOR_PICKER_CONFIG: FormItemConfig = {
  group: 'basic',
  type: 'color-picker',
  component: 'form-item-color-picker',
  settingComponent: 'item-setting-color-picker',
  name: '颜色选择器',
  selectIcon: 'icon-bg-colors',
  itemConfig: {
    tooltip: '',
    label: '颜色选择器',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: [],
    format: 'hex',
    showText: false,
    showHistory: false,
    disabledAlpha: false,
    onChangeFunction: ''
  }
};

export const RATE_CONFIG: FormItemConfig = {
  group: 'basic',
  type: 'rate',
  component: 'form-item-rate',
  settingComponent: 'item-setting-rate',
  name: '评分',
  selectIcon: 'icon-star',
  itemConfig: {
    tooltip: '',
    label: '评分',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: [],
    count: 5,
    allowHalf: false,
    allowClear: true,
    grading: false,
    color: '#425FFF',
    onChangeFunction: ''
  }
};

export const SLIDER_CONFIG: FormItemConfig = {
  group: 'basic',
  type: 'slider',
  component: 'form-item-slider',
  settingComponent: 'item-setting-slider',
  name: '滑动输入条',
  selectIcon: 'icon-minus',
  itemConfig: {
    tooltip: '',
    label: '滑动输入条',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: 0,
    direction: 'horizontal',
    step: 1,
    min: 0,
    max: 100,
    showTicks: false,
    showInput: false,
    range: false,
    showTooltip: false,
    marks: '',
    onChangeFunction: ''
  }
};

export const SWITCH_CONFIG: FormItemConfig = {
  group: 'basic',
  type: 'switch',
  component: 'form-item-switch',
  settingComponent: 'item-setting-switch',
  name: '开关',
  selectIcon: 'icon-poweroff',
  itemConfig: {
    tooltip: '',
    label: '开关',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: '',
    type: 'circle',
    checkedValue: true,
    uncheckedValue: false,
    checkedColor: '',
    uncheckedColor: '',
    checkedText: '',
    uncheckedText: '',
    onChangeFunction: ''
  }
};

export const DATE_PICKER_CONFIG: FormItemConfig = {
  id: '',
  name: '日期选择器',
  group: 'basic',
  type: 'date-picker',
  component: 'form-item-date-picker',
  settingComponent: 'item-setting-date-picker',
  selectIcon: 'icon-calendar-clock',
  itemConfig: {
    tooltip: '',
    label: '日期选择器',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: '',
    placeholder: '',
    allowClear: true,
    position: 'bottom',
    format: undefined,
    showTime: true,
    disabledDate: '',
    disabledTime: '',
    onChangeFunction: ''
  }
};

export const MONTH_PICKER_CONFIG: FormItemConfig = {
  id: '',
  name: '月份选择器',
  group: 'basic',
  type: 'month-picker',
  component: 'form-item-month-picker',
  settingComponent: 'item-setting-month-picker',
  selectIcon: 'icon-calendar',
  itemConfig: {
    tooltip: '',
    label: '月份选择器',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: '',
    placeholder: '',
    allowClear: true,
    position: 'bottom',
    format: undefined,
    onChangeFunction: ''
  }
};

export const YEAR_PICKER_CONFIG: FormItemConfig = {
  id: '',
  name: '年份选择器',
  group: 'basic',
  type: 'year-picker',
  component: 'form-item-year-picker',
  settingComponent: 'item-setting-year-picker',
  selectIcon: 'icon-calendar',
  itemConfig: {
    tooltip: '',
    label: '年份选择器',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: '',
    placeholder: '',
    allowClear: true,
    position: 'bottom',
    format: undefined,
    onChangeFunction: ''
  }
};

export const QUARTER_PICKER_CONFIG: FormItemConfig = {
  id: '',
  name: '季度选择器',
  group: 'basic',
  type: 'quarter-picker',
  component: 'form-item-quarter-picker',
  settingComponent: 'item-setting-quarter-picker',
  selectIcon: 'icon-calendar',
  itemConfig: {
    tooltip: '',
    label: '季度选择器',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: '',
    placeholder: '',
    allowClear: true,
    position: 'bottom',
    format: undefined,
    onChangeFunction: ''
  }
};

export const DATE_RANGE_PICKER_CONFIG: FormItemConfig = {
  id: '',
  name: '日期范围',
  group: 'basic',
  type: 'date-range-picker',
  component: 'form-item-date-range-picker',
  settingComponent: 'item-setting-date-range-picker',
  selectIcon: 'icon-calendar-clock',
  itemConfig: {
    tooltip: '',
    label: '日期范围',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: '',
    placeholder: '',
    allowClear: true,
    mode: 'date',
    position: 'bottom',
    format: undefined,
    showTime: true,
    separator: undefined,
    abbreviation: false,
    disabledDate: '',
    disabledTime: '',
    onChangeFunction: ''
  }
};

export const TIME_PICKER_CONFIG: FormItemConfig = {
  id: '',
  name: '时间选择器',
  group: 'basic',
  type: 'time-picker',
  component: 'form-item-time-picker',
  settingComponent: 'item-setting-time-picker',
  selectIcon: 'icon-schedule',
  itemConfig: {
    tooltip: '',
    label: '时间选择器',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: '',
    placeholder: '',
    allowClear: true,
    type: 'time',
    format: undefined,
    position: 'bottom',
    use12Hours: false,
    step: {
      hour: 1,
      minute: 1,
      second: 1
    },
    disabledHours: '',
    disabledMinutes: '',
    disabledSeconds: '',
    hideDisabledOptions: false,
    disableConfirm: false,
    onChangeFunction: ''
  }
};

/**
 * 高级组件
 */
export const IMAGE_UPLOAD_CONFIG: FormItemConfig = {
  group: 'advanced',
  type: 'image-upload',
  component: 'form-item-image-upload',
  settingComponent: 'item-setting-image-upload',
  name: '上传图片',
  selectIcon: 'icon-image',
  itemConfig: {
    tooltip: '',
    label: '上传图片',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    multiple: false,
    directory: false,
    draggable: false,
    limit: 0,
    autoUpload: true,
    showFileList: true,
    showRemoveButton: true,
    showRetryButton: true,
    showCancelButton: true,
    showUploadButton: true,
    showPreviewButton: true,
    download: false,
    showLink: true,
    imageLoading: '',
    listType: 'picture-card',
    imagePreview: true,
    onChangeFunction: ''
  }
};

export const FILE_UPLOAD_CONFIG: FormItemConfig = {
  group: 'advanced',
  type: 'file-upload',
  component: 'form-item-file-upload',
  settingComponent: 'item-setting-file-upload',
  name: '上传文件',
  selectIcon: 'icon-file-image',
  itemConfig: {
    tooltip: '',
    label: '上传文件',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    multiple: false,
    directory: false,
    draggable: false,
    limit: 0,
    autoUpload: true,
    showFileList: true,
    showRemoveButton: true,
    showRetryButton: true,
    showCancelButton: true,
    showUploadButton: true,
    showPreviewButton: true,
    download: true,
    showLink: true,
    imageLoading: '',
    listType: 'text',
    imagePreview: false,
    onChangeFunction: ''
  }
};

/**
 * 业务组件
 */
export const USER_SELECT_CONFIG: FormItemConfig = {
  group: 'system',
  type: 'user-select',
  component: 'form-item-user-select',
  settingComponent: 'item-setting-user-select',
  name: '用户选择',
  selectIcon: 'icon-user',
  itemConfig: {
    tooltip: '',
    label: '用户选择',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: undefined,
    placeholder: '',
    allowClear: true,
    multiple: false,
    allowSearch: true,
    maxTagCount: 0,
    bordered: true,
    limit: 5,
    onChangeFunction: ''
  }


};

export const ROLE_SELECT_CONFIG: FormItemConfig = {
  group: 'system',
  type: 'role-select',
  component: 'form-item-role-select',
  settingComponent: 'item-setting-role-select',
  name: '角色选择',
  selectIcon: 'icon-user-group',
  itemConfig: {
    tooltip: '',
    label: '角色选择',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: undefined,
    placeholder: '',
    allowClear: true,
    multiple: false,
    allowSearch: true,
    maxTagCount: 0,
    bordered: true,
    limit: 5,
    onChangeFunction: ''
  }
};

export const DEPT_SELECT_CONFIG: FormItemConfig = {
  group: 'system',
  type: 'dept-select',
  component: 'form-item-dept-select',
  settingComponent: 'item-setting-dept-select',
  name: '部门选择',
  selectIcon: 'icon-bar-chart',
  itemConfig: {
    tooltip: '',
    label: '部门选择',
    labelColFlex: '',
    showColon: false,
    required: false,
    ruleType: '',
    ruleMessage: '',
    feedback: false,
    ruleMatch: '',
    validateTrigger: 'change',
    asteriskPosition: 'start',
    hideLabel: false,
    hideAsterisk: false
  },
  config: {
    defaultValue: [],
    placeholder: '',
    allowClear: true,
    multiple: false,
    allowSearch: false,
    maxTagCount: 5,
    border: true,
    treeCheckable: false,
    treeCheckStrictly: false,
    treeCheckedStrategy: 'all',
    onChangeFunction: ''
  }
};

/**
 * 组件列表配置
 */
export const CONTAINER_CONFIG: FormItemConfig[] = [
  GRID_CONFIG,
  TABS_CONFIG
];

export const BASIC_CONFIG: FormItemConfig[] = [
  INPUT_CONFIG,
  INPUT_NUMBER_CONFIG,
  TEXTAREA_CONFIG,
  SELECT_CONFIG,
  CHECK_BOX_CONFIG,
  RADIO_CONFIG,
  CASCADER_CONFIG,
  TREE_SELECT_CONFIG,
  COLOR_PICKER_CONFIG,
  RATE_CONFIG,
  SLIDER_CONFIG,
  SWITCH_CONFIG,
  DATE_PICKER_CONFIG,
  MONTH_PICKER_CONFIG,
  YEAR_PICKER_CONFIG,
  QUARTER_PICKER_CONFIG,
  DATE_RANGE_PICKER_CONFIG,
  TIME_PICKER_CONFIG
];

export const ADVANCED_CONFIG: FormItemConfig[] = [
  IMAGE_UPLOAD_CONFIG,
  FILE_UPLOAD_CONFIG
];

export const SYSTEM_CONFIG: FormItemConfig[] = [
  USER_SELECT_CONFIG,
  ROLE_SELECT_CONFIG,
  DEPT_SELECT_CONFIG
];